<script setup>


/**
 * 参数介绍
 * text 导航栏显示文本
 * icon 图标
 * showIcon 是否显示图标
 * imgSrc 图片
 * showImg 是否显示图片 (优先级比图标高) 显示图片则无法显示图标
 * isActive 是否激活
 *
 */
const props = defineProps({
  text: {
    type: String,
    default: '首页'
  },
  icon: {
    type: String,
    default: ''
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  imgSrc:{
    type: String,
    default: ''
  },
  showImg:{
    type: Boolean,
    default: false
  },
  isActive: {
    type: Boolean,
    default: false
  }
})


const emit = defineEmits(["hand_click"])

const handleClick = () => {
  emit('hand_click', props.text)
}
//../../../static/logo.png
</script>

<template>
    <view @click="handleClick" :class="isActive ? 'nav_item nav_active' : 'nav_item'">
      <view v-if="props.showIcon && !props.showImg">
        <v-icon :icon="'mdi-' + icon"></v-icon>
      </view>
      <view v-if="props.showImg">
        <v-img width="20" height="20" :src="imgSrc"></v-img>
      </view>
      <view>
        <text>{{text}}</text>
      </view>
    </view>
</template>

<style scoped lang="scss">

@use "../../../static/css/main";

.nav_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: main.getVal("one_lv_text_color");
}

.nav_active {
  @include main.useTheme() {
    color: main.getVal('nav_bg_color_active');
  }
}
</style>